<template>
  <div id="data-view">
    <dv-full-screen-container>
      <div class="main-header">
        <div class="mh-left">
          技术支持:<a href="https://github.com/vaemusic/datav-vue3" target="_blank">datav-vue3</a>
        </div>
        <div class="mh-middle">
          机电设备电子档案
        </div>
        <div class="mh-right">
          <dv-border-box-2 @click="goto"
            style="width: 120px; height: 50px; line-height: 50px; text-align:center;margin-left:200px;"
          >
            <dv-button :bg="false" @click="console.log('click')">管理控制台</dv-button>            
          </dv-border-box-2>
        </div>
      </div>

      <dv-border-box-1>
        <div class="dv-main-container">
          <!-- 整体是一行，2+4而已 -->
          <el-row style="width:100%">
            <el-col :span="6">
            <!-- 左侧一列的2，平分3行 -->
              <div class="dv-line-3-1 chart-box" v-if="blocks[1]">
                <div class="chart-header">
                  {{blocks[1].name}}
                </div>
                <block-chart :blockInfo="blocks[1]" :refresh="30000"  :class="chart1"/>
                <dv-decoration-2 style="height:10px;" />
              </div>

              <div class="dv-line-3-1 chart-box" v-if="blocks[2]">
                <div class="chart-header">
                  {{blocks[2].name}}
                </div>
                <block-chart :blockInfo="blocks[2]" :refresh="30100"  :class="chart1"/>
                <dv-decoration-2 style="height:10px;" />
              </div>

              <div class="dv-line-3-1 chart-box" v-if="blocks[3]">
                <div class="chart-header">
                  {{blocks[3].name}}
                </div>
                <block-chart :blockInfo="blocks[3]" :refresh="30100" :class="chart1"/>
                <dv-decoration-2 style="height:10px;" />
              </div>
            </el-col>

            <el-col :span="18">
            <!-- 左侧一列的4，分2行，4+2布局 -->
              <el-row class="dv-line-3-2">
                <!-- 第一行高占2/3，两列，4+2布局 -->
                <el-col :span="18">
                  <dv-border-box-3>
                    <Center-Cmp />
                  </dv-border-box-3>
                </el-col>
                <el-col :span="6">
                  <el-row class="dv-line-2-1">
                    <dv-border-box-3 v-if="blocks[4]">
                      <div class="chart-header">
                        {{blocks[4].name}}
                      </div>
                      <block-chart :blockInfo="blocks.length < 4 ? null : blocks[4]" :refresh="30200" class="chart1"/>
                    </dv-border-box-3>
                  </el-row>
                  <el-row class="dv-line-2-1">
                    <dv-border-box-4  v-if="blocks[5]">
                      <div class="chart-header">
                        {{blocks[5].name}}
                      </div>
                      <block-chart :blockInfo="blocks.length < 5 ? null : blocks[5]" :refresh="30300" class="chart1"/>
                    </dv-border-box-4>
                  </el-row>
                </el-col>
              </el-row>
              <!-- 第二行占1/3，3列平分布局 -->
              <dv-border-box-4 class="dv-line-3-1">
              <el-row>
                <el-col :span="8">
                <div class="chart-box" v-if="blocks[6]">
                  <div class="chart-header">
                    {{blocks[6].name}}
                  </div>
                  <block-chart :blockInfo="blocks[6]" :refresh="30300" class="chart1"/>
                </div>
                </el-col>
                <el-col :span="8">
                <div class="chart-box" v-if="blocks[7]">
                  <div class="chart-header">
                    {{blocks[7].name}}
                  </div>
                  <block-chart :blockInfo="blocks[7]" :refresh="30300" class="chart1"/>
                </div>
                </el-col>
                <el-col :span="8">
                <div class="chart-box" v-if="blocks[8]">
                  <div class="chart-header">
                    {{blocks[8].name}}
                  </div>
                  <block-chart :blockInfo="blocks[8]" :refresh="30300" class="chart1"/>
                </div>
                </el-col>
              </el-row>
              </dv-border-box-4>
            </el-col>
          </el-row>
        </div>
      </dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>

<script setup>
 import CenterCmp from './CenterCmp.vue'
 import BlockChart from './BlockChart.vue'

import { selectDatavBlock } from "@/api/dev/datavBlock";

const router = useRouter();

const blocks = ref([]);

function goto() {
  router.push({ path:"/" });
}

selectDatavBlock({dvCode:'dv2'}).then(response=>{
  let blockMap = {};
  for(let i=0;i<response.rows.length;i++){
    blockMap[response.rows[i].dvIndex] = response.rows[i];
  }
  blocks.value = blockMap;
  console.log(blockMap)
})

</script>

<style scoped lang="scss">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .mh-left {
      font-size: 20px;
      color: rgb(1,134,187);

      a:visited {
        color: rgb(1,134,187);
      }
    }

    .mh-middle {
      font-size: 30px;
    }

    .mh-left, .mh-right {
      width: 450px;
    }
  }

  .dv-main-container {
    height: calc(100% - 100px);
    display: flex;

    box-sizing: border-box;   
    padding: 0px 15px;        
    margin: 0 auto;    


    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
    }       
 
  }
  .dv-main-container:after{        
    clear: both;        
    display: block;        
    content: "";    
  } 

}

.chart-box {
  width: 100%;
  height: 100%;
  padding: 10 10;

  .chart-header {
    text-align: center;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    margin-bottom: 10px;
  }

  .chart1 {
    height: calc(100% - 50px);
    flex: 1;
  }
  
  .chart0 {
    flex: 1;
  }
}

      .dv-line-2{             
        width: 100%; 
        height: 66.66666666%;   
      }        
      .dv-line-1{                  
        width: 100%; 
        height: 33.33333333%;    
      }           
      .dv-line-3-2{             
        width: 100%; 
        height: 66.66666666%;   
      }        
      .dv-line-3-1{                  
        width: 100%; 
        height: 33.33333333%;    
      }    
    
</style>
